<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script src="./lib/vue.js"></script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./lib/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- vue包含的容器中，它的属性为v-开头，则为指令，它不是内置的，则自定义的 -->
    <!-- 定义的方案2种：全局定义，组件内(局部) -->
    <h3 v-red v-if="show" v-change>我是一个标题</h3>
    <hr>
    <input type="text" v-change v-model="title">
  </div>

  <script>
    let directiveFn = {
      input(el) {
        console.log('input', el.value)
      }
    }

    // 定义一个全局自定义指令
    // Vue.directive('自定义指令名称不要加v-',对象[若5个函数方法(钩子函数)]或函数)
    Vue.directive('red', {
      // 绑定时方法
      bind(el) {
        el.style.color = 'red'
      },
      // 当前的绑定的元素已经插入到它的父级中
      inserted(el) {
        if (1 < 2) {
          // el.parentNode.removeChild(el)
        }
      },
      // 离开
      unbind() {
        console.log('离开')
      }
    });
    Vue.directive('change', {
      // 数据更新时触发
      update(el) {
        try {
          // console.log(el.nodeName.toLowerCase())
          directiveFn[el.nodeName.toLowerCase()](el)
        } catch (error) {}
      }
    })

    let vm = new Vue({
      el: '#app',
      data: {
        title: '',
        show: true
      }
    })
  </script>
</body>

</html>